﻿@model SMECustomerWebsite.Models.ViewModels.CustomerDetail.CustomerDetailXsellingViewModel
<!-- start accordion -->
<div class="accordion cm-accordion" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel">
        <div class="panel-heading collapsed">
            <a class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <h4 class="panel-title">By product holding</h4>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                @foreach (var item in Model.listProduct.listUsingProduct)
                {
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <label class="smes_cross_sell_label">
                            @item.ProductName <br />
                            <span>Lift: @item.CustomerLift</span>
                        </label>
                    </div>
                }
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading collapsed">
            <a class="panel-heading collapsed" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h4 class="panel-title">By Product hold</h4>
            </a>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                @foreach (var item in Model.listProduct.listUsedProduct)
                {
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <label class="smes_cross_sell_label">
                            @item.ProductName <br />
                            <span>Last used: @item.LastUse</span>
                        </label>
                    </div>
                }
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading collapsed">
            <a class="panel-heading collapsed" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <h4 class="panel-title">By Product Pre-Approved</h4>
            </a>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                @foreach (var item in Model.listProduct.listPreApproved)
                {
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <label class="smes_cross_sell_label">
                            @item.ProductName <br />
                            <span>Last used: @item.LastUse</span>
                        </label>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<!-- end of accordion -->